<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.all{
				width: 450px;
				height: 400px;
				/* border: 1px solid #000; */
				box-sizing: border-box;
				margin: 200px auto;
				position: relative;
				animation: heart 1s  alternate infinite;
				
			}
			.left{
				width: 250px;
				height: 250px;
				background-color: red;
				border-radius: 50%;
				position: absolute;
				left: 0;
				top: 0;
			      box-shadow: -4px 0px 3px 1px red ;
			}
			
			.right{
				width: 250px;
				height: 250px;
				background-color: red;
				border-radius: 50%;
				position: absolute;
				right: 0;
				top: 0;
				   box-shadow: 4px 0px 3px 1px red ;
				
			}
			.bottom{
				width: 250px;
				height: 250px;
				background-color: red;
				position: absolute;
				bottom: 50px;
				left: 50%;
				/* margin-left: -125px;
				 */
				
				/* 在企业开发中 推荐使用如下的方式让元素居中
				 水平居中 left:50%
				 transform: translateX(-50%);
				 
				 垂直  top:50%
				 transform: translateY(-50%);
				 */
				transform: translateX(-50%) rotateZ(45deg);
				
				box-shadow: 2px 2px 3px 0px red ;
			}
			
			
			@keyframes heart {
				from{
					 transform: scale(1,1);
				}
				to{
					transform: scale(1.1,1.1);
				}
			}
			
			
			
		</style>
	</head>
	<body>
		
		<div class="all">
			
			<div class="left"></div>
			<div class="right"></div>
		<div class="bottom"></div>
		</div>
	</body>
</html>